<template> 
    <div style="text-align: left;">
     历史轨迹
     <div class="full-size" id="map-container"></div>
   </div>
 </template>
 
 
 
 <script>
 import { ref } from 'vue';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import  Radar  from 'leaflet-radar';
 import 'leaflet.motion/dist/leaflet.motion.js';

 
       var lat=0;
       var lng=0;
       var radius=0;
       var azimuthAngle=0;
       var angle=0;
       var step=0;
 
     
 
       //地图类型数据
       var mapCenter_lat=28.200508;
       var mapCenter_lng=112.894302;
       var mapUrl='./public/maptile_gaode/{z}/{x}/{y}.jpg';
       var mapZoom=15;
 
     export default {
       name: "SignalR",
       components: {},
       data() {
         return {
           map:null,
           timer: null,
           seqGroups:[],
           his_seqGroups:[],
 
           seqGroup:null,
           his_seqGroup:null,
         };
       },
       created () {

       },
       mounted() {
         this.initMap();
       },
       methods: {
         initMap() {
           this.map = L.map("map-container", {
             center: [mapCenter_lat, mapCenter_lng], // 中心位置
             //center: ['28.210508', '112.894302'], // 中心位置
             zoom: mapZoom, // 缩放等级
             attributionControl: false, // 版权控件
             zoomControl: true //缩放控件
           });
           //this.map = map1; // data上需要挂载
           L.tileLayer(
             //"http://localhost:1122?style=6&x={x}&y={y}&z={z}"
           //"https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}" //在线
             //"./public/maptile_gaode/{z}/{x}/{y}.jpg"
             mapUrl
           ).addTo(this.map); // 加载底图
           //this.initRadar;
           this.initAlarm();
         },
         initRadar()
         {
             var radarDevice = new L.Radar({
             radius:radius,
             status:1,
             angle:angle,
             direction:azimuthAngle,
             location:""+lat+" "+lng+""
             },{
               online: {
                 color: '#dd2',
                 dashArray: [5, 15],
                 weight: 1,
                 opacity: 1,
                 fillColor: '#d21',
                 fillOpacity: 0.1
               },
               animat: {
                 color: '#dd2',
                 weight: 1,
                 opacity: 1,
                 fillColor: "#d21",
                 fillOpacity: 0.01,
                 pmIgnore: true
               },
               step:step
             })
             radarDevice.addTo(this.map)
         },
         initAlarm(){
           window.chrome.webview.addEventListener('message', event => 
           {
             if(event.data.type=="defencearea")
             {
                 event.data.data.forEach(element => {
                 lat = element.lat;
                 lng = element.lng;
                 radius=element.defenceradius;
                 azimuthAngle=element.azimuthangle;
                 angle=element.angle;
                 step=parseInt(element.step) ;
                 this.initRadar();
               });
             }
             else if(event.data.type=="mapset"){
               mapUrl= event.data.data[0].MapUrl;
               mapCenter_lat=parseFloat(event.data.data[0].MapCenter_lat);
               mapCenter_lng=parseFloat(event.data.data[0].MapCenter_lng);
               mapZoom= parseInt(event.data.data[0].MapZoom);
               var newLatLng = L.latLng(mapCenter_lat, mapCenter_lng);
               this.map.setZoom(mapZoom);
               this.map.setView(newLatLng);
             }
             else if(event.data.type=="alarm_record")
             {
               var t1=event.data.data
               var HseqGroup =L.motion.seq([
               L.motion.polyline(t1,
               {
               color: "orangered",
               weight: 5,
               }
               , 
               {
               easing: L.Motion.Ease.easeInOutQuad
               }
               , 
               {
               removeOnEnd: false,
               icon: L.divIcon({html: "<img src='./public/marker/marker-icon.png' class='leaflet-marker-icon lmap-icon leaflet-zoom-animated leaflet-interactive' alt='Marker' tabindex='0' role='button' style='margin-left: -14px; margin-top: -45px; width: 25; height: 41px;  z-index: 369;'>", iconSize: L.point(0, 0)})
               }
               ).motionDuration(10000),
               ]).addTo(this.map).motionStart();  
             }
             else if(event.data.type=="targetadd"){
               var curr_Target1=[];
               curr_Target1.push({lat:28.212469,lng: 112.894330})
               curr_Target1.push({lat:28.212469,lng: 112.804330})
               let shipPolyline1 =L.motion.polyline(curr_Target1).motionDuration();
               this.seqGroups[0].seqGroup.addLayer(shipPolyline1,true);
             }
             else
             { 
             }  
           });
         },
       },
       beforeDestroy() {

       }
     };
 </script>
 
 <style :scoped>
 html, body, #app {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
 }
 
 .full-size {
   width: 100vw; /* 视口宽度 */
   height: 100vh; /* 视口高度 */
   overflow: hidden; /* 防止内容溢出 */
 }
 .target-class {
     color: red; /* 更改字体颜色为红色 */
 }
 </style>